<template>
  <td :class="widthClass" class="font30 font-bolder">
    {{ props.trItem.period }}
  </td>
  <td class="red font-bolder">
    <span v-html="props.trItem.content" />
  </td>
  <td v-if="!hiddenRight" :class="widthClass" class="font30 font-bolder">
    <span class="blue">开:</span
    ><span v-if="props.trItem.root !== null && props.trItem.root !== ''"
      >{{ props.trItem.root.genus }}{{ props.trItem.root.code }}</span
    ><span v-else>？00</span>准
  </td>
</template>
<script setup>
import { onMounted, defineProps } from "vue";
const props = defineProps({
  trItem: {
    type: Object,
    default: () => {},
  },
  widthClass: {
    type: String,
    default: () => "width22",
  },
  hiddenRight: {
    type: Boolean,
    default: () => false,
  },
});
onMounted(() => {
  filterWord();
});
const filterWord = () => {
  let content = props.trItem.content;
  if (
    props.trItem.root !== null &&
    props.trItem.root !== "" &&
    props.trItem.root.genus !== undefined
  ) {
    content = content.replace(
      new RegExp(props.trItem.root.genus),
      `<span class="bg-yellow">${props.trItem.root.genus}</span>`
    );
    content = content.replace(
      new RegExp(props.trItem.root.code),
      `<span class="bg-yellow">${props.trItem.root.code}</span>`
    );
  }
  props.trItem.content = content;
};
</script>
